import { DetailPage, Copy, CardData, CardPanel, Descriptions, Numeral, Circle, TextStream, Comparison, Scan } from "@web-design/ui";
import React, { Profiler, useEffect, useMemo, useState } from "react";

import { Button, Card, Col, List, Row, Space } from "antd";
// import T3D from "./3d";
function createGradient(startColor, endColor, steps) {
  const startRGB = hexToRgb(startColor);
  const endRGB = hexToRgb(endColor);
  const stepR = (endRGB[0] - startRGB[0]) / (steps - 1);
  const stepG = (endRGB[1] - startRGB[1]) / (steps - 1);
  const stepB = (endRGB[2] - startRGB[2]) / (steps - 1);

  const gradient = [];
  for (let i = 0; i < steps; i++) {
    const r = Math.round(startRGB[0] + stepR * i);
    const g = Math.round(startRGB[1] + stepG * i);
    const b = Math.round(startRGB[2] + stepB * i);
    gradient.push(rgbToHex(r, g, b));
  }

  return gradient;
}

function hexToRgb(hex) {
  const bigint = parseInt(hex.slice(1), 16);
  const r = (bigint >> 16) & 255;
  const g = (bigint >> 8) & 255;
  const b = bigint & 255;
  return [r, g, b];
}

function rgbToHex(r, g, b) {
  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

// 使用示例
const startColor = '#ffffff'; // 淡色
const endColor = '#47b747'; // 深色 
const steps = 20; // 渐变步数
const gradient = createGradient(startColor, endColor, steps);
import { AuditOutlined, SearchOutlined, ShopOutlined } from "@ant-design/icons";
const App = () => {
  const items = [
    {
      label: "手术室",

      children: "222",
    },
    {
      label: "手术室1",
      children: "222",
    },
    {
      label: "手术室2",
      children: "222",
    },
    {
      label: "手术室3",
      children: "222",
    },
    {
      label: "手术室4",
      children: "222",
    },
    {
      label: "手术室7",
      children: "222",
    },
  ];
  useEffect(() => {
    window.addEventListener("message", (event) => {
      // 初始化成功事件
      if (event.data.type === "ZW_INIT") {
        console.log("init");
      }
      //登陆成功事件
      if (event.data.type === "ZW_LOGIN") {
        console.log("LOGIN");
      }
      //加入购物车事件
      if (event.data.type === "ZW_ADD_SHOP_CAR") {
        console.log(event.data.data);
      }
      //立即购买事件
      if (event.data.type === "ZW_BUY_NOW") {
        debugger
        console.log(event.data.data);
      }
      //保存事件
      if (event.data.type === "ZW_PRODUCT_SAVE") {
        console.log(event.data.data);
      }
    });
    //登陆接口
    window.onload = function () {
      // document.querySelector("#zw-sdk").contentWindow.postMessage(
      //   {
      //     type: "LOGIN",
      //     external_customer_id: "",
      //   },
      //   "https://zwstatic.hicustom.com"
      // );
    };
  }, []);

  return (
    <DetailPage
      action={
        <Space>
          <Button>重置</Button>
          <Button type="primary">提交</Button>
        </Space>
      }

    >
  <Scan style={{display:'inline-block'}}  scaning color="greenyellow"  direction='vertical'> 
<Comparison
style={{width:300}}
disabled
afterImage="http://static.xyb2b.com/images/7e82ad4441d1845fd5f92f33e59766b6.jpg"
beforeImage="http://static.xyb2b.com/images/661fb8285ca094387fbb2ea127f5a6ba.png"
/>
</Scan>  
<Scan style={{display:'inline-block'}}   scaning color="greenyellow"  direction='horizontal'> 

<Comparison
style={{width:300}}

afterImage="http://static.xyb2b.com/images/30b1cdd9cbf329ba3077539370cc3cec.jpg"
beforeImage="http://static.xyb2b.com/images/200d263ddab6e447e930a3ecc64ecb8f.png"
/>
</Scan>
      <TextStream  style={{width:100}} text="my name is liangshengdeliangshengdeliangshengdeliangshengde"/>

      <Card>
        <Space>
          <Circle size={150} desc={<Numeral prefix="$">999999</Numeral>} title="昨日新增" />
          <Circle size={150} desc={<Numeral prefix="$">999999</Numeral>} title="本月累计" />
          <CardPanel
           labelWidth={100}
             bgImage={<ShopOutlined />}
            title='测试色'
            items={[{
              label: '关联买家账号',
              value: '买家名称'
            }, {
              label: '买家商户号',
              value: <Copy text='037054220230810000050292874'>037054220230810000050292874</Copy>
              // value:<strong>ss</strong>
            }, {
              label: '银行账户余额',
              value: '103.08'
            }]}
          />
        </Space>
        <Copy text='sss' />
        <Copy text='sss' ><Button>复制</Button></Copy>
        {/* <List
  dataSource={[{},{}]}
  renderItem={(item,)=>{
    return <List.Item key={item.}>

      <Circle size={150} title={<Numeral prefix="$">999999</Numeral>} desc="今日"/>
    </List.Item>
  }}
  /> */}
        {/* <Circle size={150} title={<Numeral prefix="$">999999</Numeral>} desc="今日"/> */}
      </Card>

      <Card bordered={false} title='基础数据' size='small' style={{ marginBottom: 10 }}>

        <List
        itemLayout='vertical'
          grid={{ gutter: 15, column: 3 }}
          dataSource={[
            {
              color: 'green'
            }, {
              color: 'cyan'
            }, {
              color: 'blue'
            }, {
              color: 'geekblue'
            }, {
              color: 'purple'
            }, {
              color: 'orange'
            }, {
              color: 'red'
            },

          ]}
          renderItem={item => {
            return <List.Item key={item.color}>
              <CardData title={item.color} items={[
                {
                  label: '今日',
                  value: <Numeral prefix='$' format="00,0.00">999999</Numeral>
                }, {
                  label: '当月',
                  value: <Numeral prefix='$' format="00,0.00">999999</Numeral>
                }
              ]} color={item.color} icon={<AuditOutlined />} />
            </List.Item>
          }}
        />

      </Card>
      <Descriptions.Group>
        <Descriptions title="基础信息" items={items} />
        <Descriptions title="联系信息" items={items} />
      </Descriptions.Group>

      <Descriptions title="其他信息" items={items} style={{}} />
    </DetailPage>
  );
};
export default App;
